<template>
    <div class="WorkOrder">
        <div class="WorkOrderBox">
            <div
                class="item"
                @mouseover="mouseOver(0)"
                @mouseleave="mouseLeave(0)"
                :style="
                    Chenge == 0
                        ? 'background-color: #2661bc;color: #fff;'
                        : 'color: #2661bc;'
                "
            >
                <img
                    :src="
                        Chenge == 0
                            ? require('../../../assets/icons/guzhang.png')
                            : require('../../../assets/icons/Noguzhang.png')
                    "
                    alt=""
                />
                <div class="text">故障申报</div>
            </div>
            <div
                class="item"
                @mouseover="mouseOver(1)"
                @mouseleave="mouseLeave(1)"
                :style="
                    Chenge == 1
                        ? 'background-color: #2661bc;color: #fff;'
                        : 'color: #2661bc;'
                "
            >
                <img
                    style="width: 70px; height: 70px"
                    :src="
                        Chenge == 1
                            ? require('../../../assets/icons/hoveryewu.png')
                            : require('../../../assets/icons/Noyewu.png')
                    "
                    alt=""
                />
                <div class="text">业务协助</div>
            </div>
            <div
                class="item"
                @mouseover="mouseOver(2)"
                @mouseleave="mouseLeave(2)"
                :style="
                    Chenge == 2
                        ? 'background-color: #2661bc;color: #fff;'
                        : 'color: #2661bc;'
                "
            >
                <img
                    style="width: 70px; height: 70px"
                    :src="
                        Chenge == 2
                            ? require('../../../assets/icons/ziyuan.png')
                            : require('../../../assets/icons/Noziyuan.png')
                    "
                    alt=""
                />
                <div class="text">资源服务</div>
            </div>
        </div>
        <div class="Popup_1" v-show="Chenge == 0">
            <div class="arrow"></div>
            <div class="centent" @click="Jump(item.Url)" v-for="(item,index) in FaultDeclaraList" :key="index">
                <img src="../../../assets/icons/Noguzhang.png" alt="">
                <div class="texts">{{item.name}}</div>
            </div>
        </div>
        <div class="Popup_2" v-show="Chenge == 1">
            <div class="arrow"></div>
            <div class="centent" @click="Jump(item.Url)" v-for="(item,index) in BusinessAssistanceList" :key="index">
                <img src="../../../assets/icons/Noyewu.png" alt="">
                <div class="texts">{{item.name}}</div>
            </div>
        </div>
        <div class="Popup_3" v-show="Chenge == 2">
            <div class="arrow"></div>
            <div class="centent" @click="Jump(item.Url)" v-for="(item,index) in ResourceServices" :key="index">
                <img src="../../../assets/icons/Noziyuan.png" alt="">
                <div class="texts">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            Chenge: 3,
            FaultDeclaraList:[
                {
                    name:'应用故障',
                    Url:'/faultdeclara/ApplicationFailure'
                },
                {
                    name:'操作系统故障',
                    Url:'/faultdeclara/systemFailure'
                },
                {
                    name:'网络故障',
                    Url:'/faultdeclara/NetworkFailure'
                },
                {
                    name:'云平台故障',
                    Url:'/faultdeclara/CloudFailure'
                },
                {
                    name:'安全故障',
                    Url:'/faultdeclara/SafetyFailure'
                },
            ],
            BusinessAssistanceList:[
                {
                    name:'数据交互',
                    Url:'/businessassistance/ArrayInteraction'
                },
                {
                    name:'端口管理',
                    Url:'/businessassistance/InterfaceManagement'
                },
                {
                    name:'访问权限',
                    Url:'/businessassistance/AccessRights'
                },
                {
                    name:'进出机房',
                    Url:'/businessassistance/InOutComputerRoom'
                },
                {
                    name:'系统升级/变更',
                    Url:'/businessassistance/SystemUpgrade'
                },
                {
                    name:'托管设备上下架',
                    Url:'/businessassistance/ManagedDevice'
                },
                // {
                //     name:'压力/安全测试',
                //     Url:'/businessassistance/PressureSafetyTest'
                // },
                // {
                //     name:'等保测评协助',
                //     Url:'/businessassistance/InterfaceManagement'
                // },
                {
                    name:'域名备案',
                    Url:'/businessassistance/DomainNameFiling'
                },
                // {
                //     name:'找回备案号密码',
                //     Url:'/businessassistance/RetrieveRecordPassword'
                // },
                {
                    name:'其他事项',
                    Url:'/businessassistance/OtherMatters'
                },
            ],
            ResourceServices:[
                {
                    name:'信创新增资源',
                    Url:"/resources/applys/addapply"
                },
                {
                    name:'信创变更资源',
                    Url:"/resources/changes/add"
                },
                // {
                //     name:'IP资源管理',
                //     Url:"/resources/IPResourceManager"
                // },
                {
                    name:'非信创新增资源',
                    Url:"/resources/applyNoXc/addapply"
                },
                {
                    name:'非信创变更资源',
                    Url:"/resources/changeNoXc/add"
                }
            ]
        };
    },
    methods: {
        mouseOver(num) {
            this.Chenge = num;
        },
        mouseLeave(num) {
            this.Chenge = num;
        },
        Jump(Url){
            this.$router.push(Url);
        }
    },
};
</script>
<style lang="scss" scoped>
.WorkOrder {
    width: 100%;
    height: 100vh;
    // background-color: rgb(232,236,240);
    background: linear-gradient(30deg, rgb(199, 214, 223), rgb(110, 138, 163));
    position: relative;
    .WorkOrderBox {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        height: 230px;
        display: flex;
        justify-content: space-around;
        .item {
            width: 230px;
            height: 230px;
            border-radius: 50%;
            border: 1px solid rgb(38, 97, 188);
            position: relative;
            font-size: 24px;
            color: rgb(38, 97, 188);
            cursor: pointer;
            text-align: center;
            img {
                width: 90px;
                height: 90px;
                vertical-align: middle;
                margin-top: calc(50% - 45px);
            }
            .text {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 115px;
                line-height: 115px;
                text-align: center;
            }
        }
        // .item:hover{
        //     background-color: rgb(38,97,188);
        //     color: #fff;
        // }
    }
    .Popup_1 {
        position: absolute;
        top: 340px;
        left: 60px;
        width: 870px;
        height: 200px;
        background-color: rgb(210, 222, 230);
        display: flex;
        .arrow {
            position: absolute;
            top: -50px;
            left: 180px;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid rgb(210, 222, 230);
        }
        .centent{
            width: 20%;
            height: 150px;
            text-align: center;
            margin-top: 50px;
            cursor: pointer;
            img{
                width: 70px;
                height: 70px;
                line-height: 70px;
                display: block;
                margin: 0 auto;
            }
            .texts{
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 400;
                color: rgb(38, 97, 188);
            }
        }
    }
    .Popup_2 {
        position: absolute;
        top: 340px;
        left: 50%;
        width: 870px;
        height: 520px;
        transform: translateX(-50%);
        background-color: rgb(210, 222, 230);
        display: flex;
        flex-wrap: wrap;
        .arrow {
            position: absolute;
            top: -50px;
            left: 50%;
            width: 0;
            height: 0;
            transform: translateX(-50%);
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid rgb(210, 222, 230);
        }
        .centent{
            width: 25%;
            height: 120px;
            text-align: center;
            margin-top: 40px;
            cursor: pointer;
            img{
                width: 60px;
                height: 60px;
                line-height: 60px;
                display: block;
                margin: 0 auto;
            }
            .texts{
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 400;
                color: rgb(38, 97, 188);
            }
        }
    }
    .Popup_3 {
        position: absolute;
        top: 340px;
        right: 60px;
        width: 600px;
        height: 400px;
        background-color: rgb(210, 222, 230);
        display: flex;
        flex-wrap: wrap;
        .arrow {
            position: absolute;
            top: -50px;
            right: 180px;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid rgb(210, 222, 230);
        }
        .centent{
            width: 33%;
            height: 150px;
            text-align: center;
            margin-top: 50px;
            cursor: pointer;
            img{
                width: 60px;
                height: 60px;
                line-height: 60px;
                display: block;
                margin: 0 auto;
            }
            .texts{
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 400;
                color: rgb(38, 97, 188);
            }
        }
    }
}
</style>